<script setup lang="ts">
import { ERollingPagination } from 'exploria-ui';
import { ref } from 'vue';

const currentPage = ref(1);

const list = Array.from({ length: 100 }, (_, i) => i + 1);
</script>

<template>
    <ERollingPagination
        v-model:page="currentPage"
        :data="list"
        :total="list.length"
        :page-size="20"
        #default="{ item }"
    >
        <div class="item">{{ item }}</div>
    </ERollingPagination>
</template>

<style scoped lang="scss">
.e-rolling-pagination {
    max-height: 300px;
    .item {
        height: 100px;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
